import { convertImgUrl } from "@/utils/MyFun";
import { formateDate } from "@/utils/common";
import { Icon } from "@iconify/react";
import { Card } from "antd";
import { useMemo } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

const Styled = styled.div`
  margin-top: 5rem;
  .ant-card-body {
    padding: 0;
  }
  .ell-4 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }

  .box {
    width: 100%;
    display: flex;
    height: 100%;
    position: relative;
  }
  .my-card {
    height: 70rem;
    overflow: hidden;
  }
  .ant-card-body {
    height: 100%;
  }
  .my-img {
    width: 45%;
    height: 100%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      &:hover {
        transform: scale(1.1);
      }
    }
  }
  .p-l {
    position: absolute;
    left: 0;
  }
  .p-r {
    position: absolute;
    right: 0;
  }
  .my-text {
    width: 55%;
    padding: 10rem;
    .title {
      font-size: 6rem;
      font-weight: 600;
      color: #000;
      margin-bottom: 2.5rem;
    }
    .options {
      margin-bottom: 2.5rem;
      .split {
        padding: 0 1.5rem;
      }
    }
    .ctx {
      line-height: 6.25rem;
    }
  }
  @media (max-width: 768px) {
    .box {
      flex-direction: column;
    }
    .my-img {
      width: 100%;
      height: 57.5rem;
    }
    .my-text {
      width: 100%;
    }
    .p-l,
    .p-r {
      position: static;
    }

    .my-card {
      height: 107.5rem;
    }
  }
  .img-radius {
    border-radius: 5px;
  }
  .img-radius-l {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  .img-radius-r {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .transition-600 {
    transition-property: color, background-color, border-color,
      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
      filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 600ms;
  }
  .animate-duration-700 {
    animation-duration: 700ms;
  }

  .animate-zoom-in {
    animation: zoom-in 1s linear 1;
  }
  @keyframes zoom-in {
    0% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }
    100% {
      opacity: 1;
    }
  }
`;

const ArticleCard = (props) => {
  //解构文章id和文章信息
  const { idx = 0, article } = props;
  //根据当前文章的id决定图片放置的位置
  const isRightClassImg = useMemo(() => {
    return idx % 2 === 0 ? "img-radius-l p-l" : "img-radius-r p-r";
  }, [idx]);
  const isRightClassText = useMemo(() => {
    return idx % 2 === 0 ? "p-r" : "p-l";
  }, [idx]);
  return (
    <Styled className="transition-600 animate-zoom-in animate-duration-700">
      <Card hoverable className="my-card">
        <div className="box">
          {/* 封面图 */}
          <div
            className={`${isRightClassImg} my-img `}
            style={{ overflow: "hidden" }}
          >
            <Link to={`/article/${article.id}`}>
              <img
                className="transition-600 "
                src={convertImgUrl(article.img)}
                alt="文章封面"
              />
            </Link>
          </div>
          {/* 文章信息 */}
          <div className={`${isRightClassText} my-text`}>
            <Link className="title" to={`/article/${article.id}`}>
              《{article.title}》
            </Link>
            <div className="options">
              {/* 置顶 */}
              {article.is_top ? (
                <span style={{ color: "red" }}>
                  <Icon icon="ic:twotone-align-vertical-top" />
                  置顶
                </span>
              ) : null}
              {article.is_top ? <span className="split">|</span> : null}
              {/* 时间 */}
              <span>
                <Icon icon="healthicons:i-schedule-school-date-time" />
                {formateDate(article.create_at)}
              </span>
              <span className="split">|</span>
              {/* 分类 */}
              <Link
                to={`/categories/${article.category_id}?name=${article.category_name}`}
              >
                <Icon icon="teenyicons:inbox-outline" /> {article.category_name}
              </Link>
              <span className="split">|</span>
              {/* 标签 */}
              {article.tags.map((item, index) => {
                return (
                  <Link key={index}>
                    <Icon icon="uil:tag" />
                    {item}
                  </Link>
                );
              })}
            </div>
            {/* 内容 */}
            <div className="ctx ell-4">{article.content}</div>
          </div>
        </div>
      </Card>
    </Styled>
  );
};

export default ArticleCard;
